<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        {{massage}}
        <br>
        {{newMsg}}
        <div>
            <br>
            {{total}}
        </div>
        <div>{{newArr}}</div>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                massage: '1213',
                price1: 100,
                price2: 100,
                price3: 100,
                arr: [1, 2, 3, 4]
            },
            computed: {
                newMsg() {
                    return this.massage
                },
                total() {
                    //响应式计算
                    return this.price1 + this.price2 + this.price3
                },
                newArr() {
                    return this.arr.map(item => {
                        return '<div>' + item + '</div>'
                    })
                }
            }
        })
    </script>
</body>

</html>